import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form, Input, Button, Card,Radio, Select
} from 'antd';
import {message} from "antd/lib/index";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@connect(state => ({
    submitting: state.shippingEdit.loading,
}))
@Form.create()
export default class ShippingEdit extends PureComponent {

    handleParentModalVisible = (e) => {
        this.props.handleModalVisible();
    }

    handleSubmit = (editType,shiping_id,e) => {
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.dispatch({
                    type: `shippingEdit/${editType}`,
                    payload: {...values,shipping_id: shiping_id},
                    callback: (response) => {
                        if (response.result === 0) {
                            message.success('提交成功');
                            this.props.handleModalVisible();
                            this.props.handleModalSuccess(this.props.pagination);
                        } else {
                            message.success('提交失败');
                        }
                    }
                });
            }
        });
    }

    render() {
        const {submitting, record, editType, typeSList} = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const formInitValue = editType === 'add' ? '' : record;
        const shipping_id = editType === 'add' ? '' : record.shipping_id;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };
        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <Card bordered={false}>
                <Form
                    onSubmit={this.handleSubmit}
                    hideRequiredMark
                >
                    <FormItem
                        {...formItemLayout}
                        label="配送方式编码"
                    >
                        {getFieldDecorator('shipping_code', {
                            initialValue:  formInitValue.shipping_code || '',
                            rules: [{
                                required: true, message: '请输入配送方式编码',
                            }, {
                                max: 20, message:'最大字段长度为20',
                                }
                            ],
                        })(
                            <Input placeholder="配送方式编码"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="配送方式名称"
                    >
                        {getFieldDecorator('shipping_name', {
                            initialValue:  formInitValue.shipping_name || '',
                            rules: [{
                                required: true, message: '请输入配送方式名称',
                            },{
                                max: 120, message:'最大字段长度为120',
                            }
                            ],
                        })(
                            <Input placeholder="配送方式编码"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="配送方式描述"
                    >
                        {getFieldDecorator('shipping_desc', {
                            initialValue:  formInitValue.shipping_desc || '',
                            rules: [{
                                required: true, message: '请输入配送方式描述',
                            },{
                                max: 255, message:'最大字段长度为255',
                            }
                            ],
                        })(
                            <Input placeholder="配送方式描述"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="保价费用"
                    >
                        {getFieldDecorator('insure', {
                            initialValue:  formInitValue.insure || '',
                            rules: [{
                                pattern:RegExp(/^[0-9]+$/),
                                required: true, message: '请输入保价费用(数字)',
                            },{
                                max: 10, message:'最大字段长度为10',
                            }
                            ],
                        })(
                            <Input placeholder="保价费用"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否支持货到付款"
                    >
                        {getFieldDecorator('support_cod', {
                            initialValue:  !formInitValue.support_cod ? 0: 1,
                            rules: [{
                                required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>支持</Radio>
                                <Radio value={0}>不支持</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否被禁用"
                    >
                        {getFieldDecorator('enabled', {
                            initialValue:  !formInitValue.enabled ? 0 : 1,
                            rules: [{
                                required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>禁用</Radio>
                                <Radio value={0}>不禁用</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button type="primary" loading={submitting} onClick={this.handleSubmit.bind(this,editType,shipping_id)}>
                            提交
                        </Button>
                        <Button style={{marginLeft: 8}} onClick={this.handleParentModalVisible}>取消</Button>
                    </FormItem>
                </Form>
            </Card>
        );
    }
}
